<template>
    <el-container>
        <el-header :height="'auto'" class="mb20">
            <breadcrumb :title="'未归集资源申请列表'" :noBack="true"></breadcrumb>
        </el-header>
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-input v-model="resName" placeholder="输入资源名称" class="input short mr10"
                                      size="small"></el-input>
                            <el-select v-model="resourcesValue" placeholder="资源类型" class="select short mr10"
                                       size="small">
                                <el-option
                                    v-for="item in resourcesOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model="currentState" placeholder="当前状态" class="select short mr10"
                                       size="small">
                                <el-option
                                    v-for="item in currentOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-date-picker v-model="searchTime" size="small" class="short mr10"
                                            type="daterange"
                                            range-separator="~"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                            </el-date-picker>
                            <el-button class="primary" @click="getList()" size="small">查询</el-button>
                            <el-button class="minor" @click="reset()" size="small">重置</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" :height="'100%'"
                                   ref="table">
                        <template slot="resType" slot-scope="scope">
                            <span v-if="scope.row.resType==1">服务接口类</span>
                            <span v-if="scope.row.resType==2">服务页面类</span>
                            <span v-if="scope.row.resType==3">数据交换类</span>
                        </template>
                        <template slot="state" slot-scope="scope">
                            <span v-if="scope.row.state==2||scope.row.state==3">待审核</span>
                            <span v-else-if="scope.row.state==4">审核中</span>
                            <span v-else-if="scope.row.state==5">已取消</span>
                            <span v-else-if="scope.row.state==6">审核通过</span>
                            <span v-else-if="scope.row.state==7" class="error">审核不通过</span>
                        </template>
                        <template slot="operation" slot-scope="scope">
                            <div class="operation">
                                <el-link type="primary" :underline="false" v-if="scope.row.state==7"
                                         @click="openEdit(scope.row)">修改
                                </el-link>
                                <el-link type="primary" :underline="false" @click="openDetail(scope.row)">
                                    查看
                                </el-link>
                                <el-link type="primary" :underline="false" @click="cancelList(scope.row)"
                                         v-if="scope.row.state==2||scope.row.state==3||scope.row.state==4">取消
                                </el-link>
                            </div>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <transition name="slide">
                <router-view @upload="getList"></router-view>
            </transition>
        </el-main>
    </el-container>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'

    export default {

        data() {
            return {
                resourcesOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    {
                        label: '服务接口类',
                        value: 1
                    },
                    {
                        label: '服务页面类',
                        value: 2
                    },
                    {
                        label: '数据交换类',
                        value: 3
                    }
                ],
                resourcesValue: '',
                currentOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    {
                        label: '待审核',
                        value: 2
                    },
                    {
                        label: '审核中',
                        value: 4
                    },
                    {
                        label: '已取消',
                        value: 5
                    },
                    {
                        label: '审核通过',
                        value: 6
                    },
                    {
                        label: '审核不通过',
                        value: 7
                    }
                ],
                currentState: '',
                tableData: [],
                header: [
                    {
                        prop: 'applicationNum',
                        label: '申请单号',
                        minWidth: '250',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'resName',
                        label: '资源名称',
                        minWidth: '250',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'applyTime',
                        label: '申请日期',
                        minWidth: '150',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    // {
                    //     prop: 'resType',
                    //     label: '资源类型',
                    //     minWidth: '100',
                    //     align: 'center',
                    //     headerAlign: 'center'
                    // },
                    {
                        prop: 'state',
                        label: '当前状态',
                        width: '100',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '130',
                        fixed: 'right'
                    }
                ],
                slotColumns: ['operation', 'state', 'resType'],
                loading: false,
                index: 1,
                orderNo: '',
                searchTime: '',
                resName: '',
                page: {},
                show: false
            }
        },
        mounted() {
            if (this.$route.query.orderNo) this.orderNo = this.$route.query.orderNo
            this.getList()
        },
        methods: {
            // 获取列表数据
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/rdResForOnline/selectMyApplyBatch', {
                    // applyTime: this.searchTime,
                    startTime: this.searchTime[0] ? this.$filter.timeFormat(this.searchTime[0], 'YYYY-MM-DD') : '', // 起始时间
                    endTime: this.searchTime[1] ? this.$filter.timeFormat(this.searchTime[1], 'YYYY-MM-DD') : '', // 结束时间
                    resName: this.resName,
                    resType: this.resourcesValue,
                    current: this.index || 1,
                    size: 15,
                    state: this.currentState
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 重置操作
            reset() {
                this.searchTime = ''
                this.resName = ''
                this.resourcesValue = ''
                this.currentState = ''
                this.getList(1)
            },
            // 打开查看页面
            openDetail(row) {
                this.$router.push({
                    path: this.$route.path + '/detail',
                    query: {
                        applyNumChild: row.applicationNum,
                        id: row.id,
                        offLine: true
                    }
                })
            },
            openEdit(row) {
                this.$router.push({
                    path: this.$route.path + '/edit',
                    query: {
                        applyNumChild: row.applicationNum,
                        id: row.id,
                        offLine: true
                    }
                })
            },
            // 取消申请按钮
            cancelList(row) {
                this.loading = true
                this.$http.post('/rdResourceApplicationDetail/cancelApply', {
                    applyNumChild: row.applicationNum
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        row.state = 5
                    }
                }).catch(() => {
                    this.loading = false
                })
            }
        },
        components: {
            tableExample,
            breadcrumb,
            page
        }
    }
</script>

<style scoped lang="less">
</style>
